<template>
    <div class="app-container">
      <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="园所性质" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入园所名称" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="设备名称" prop="type">
         <el-input v-model="queryParams.name" placeholder="请输入学生姓名" clearable size="small"></el-input>
        </el-form-item>
        <el-form-item label="上报时间" prop="checkDate">
            <el-date-picker
              v-model="graduateDate"
              value-format="yyyy-MM-dd"
              type="date"
              size="small"
              placeholder="选择日期">
            </el-date-picker>
      </el-form-item>
      <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form> -->
      <el-table v-loading="loading" :data="facilityList" >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
        <el-table-column label="园所性质" align="center" prop="name" />
        <el-table-column
           v-for="dict in typeOptions"  :key="dict.dictValue"
           :label="dict.dictLabel" align="center" prop="name" />
        <!-- <el-table-column label="数量" align="center" prop="roomName" />
        <el-table-column label="上报人" align="center" prop="roomName" />
        <el-table-column label="联系方式" align="center" prop="roomName" />
        <el-table-column label="上报时间" align="center" prop="type" :formatter="typeFormat" /> -->
        <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetails(scope.row)" >详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

      <!-- 导入对话框 -->
      <!-- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
          :auto-upload="false" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的考勤数据
            <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog> -->
    </div>
  </template>

  <script>
     import { facilityList,schoolID } from "@/api/qu/yssshesb";
    export default {
      name: "",
      data() {
        return {
          facilityList:[{name:'1111'}],
          graduateDate:'',
          // 遮罩层
          loading: true,
          total: 0,
          // 园所设施字典
          typeOptions: [],
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            name: null,
            roomId: null,
            checkDates: null,
            addUser: null,
            addTime: null,
            type: null,
            comment: null
          },
        };
      },
      created() {
        this.getList();
        this.getDicts("facility_type").then(response => {
          this.typeOptions = response.data;
        });
      },
      methods: {
        // 序号
        customeIndex(index){
           return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
        },
        /** 查询宿舍考勤列表 */
        getList() {
          // this.loading = true;
           try {
            this.loading = false;
           } catch (error) {
              console.log(error);
           }

        },
        // 取消按钮
        cancel() {
          this.open = false;
        },
        //详情
        handleDetails(){
            this.open=true
            console.log('详情');
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有宿舍考勤数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportStudentCheck(queryParams);
          }).then(response => {
            this.download(response.msg);
          })
        },
        /** 导入按钮操作 */
        handleImport() {
          this.upload.title = "宿舍考勤导入";
          this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
          importTemplate().then(response => {
            this.download(response.msg);
          });
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
          this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
          this.upload.open = false;
          this.upload.isUploading = false;
          this.$refs.upload.clearFiles();
          this.$alert(response.msg, "导入结果", {
            dangerouslyUseHTMLString: true
          });
          this.getList();
        },
        // 提交上传文件
        submitFileForm() {
          this.$refs.upload.submit();
        }
      }
    };
  </script>
